<template>
  <div class="grid grid-cols-8">
    <div
      class="col-span-6 scroll-m-[var(--header-height)] scroll-smooth prose dark:prose-invert prose-slate prose-headings:scroll-mt-[var(--header-height)] prose-a:no-underline"
    >
      <!-- <UBreadcrumb :links="links" /> -->
      <ContentDoc>
        <template #not-found>
          <h1 class="text-center">Document not found</h1>
        </template>
        <template #empty>
          <h1 class="text-center">Document is empty</h1>
        </template>
      </ContentDoc>
    </div>
    <div
      class="col-span-2 sticky top-[var(--header-height)] h-[calc(100vh-var(--header-height))] overflow-y-auto"
    >
      <Links>
        <template #header>
          <div class="text-[#333] font-semibold text-[14px] my-2">目录</div>
          <ContentTree :links="links" />
          <UDivider type="dashed" class="my-4" />
        </template>
      </Links>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'docs',
})
const route = useRoute()
const { slug } = route.params
useSeoMeta({
  title: slug.toString(),
  twitterCard: 'summary_large_image',
})
const { data } = await useAsyncData('page-data', () => {
  return queryContent(route.path).findOne()
})
const links = data.value?.body?.toc?.links.map((item) => ({
  id: item.id,
  text: item.text,
  depth: item.depth,
  children: item.children,
}))
</script>

<style scoped></style>
